<template>
  <!-- 大触直播页面 -->
  <div class="live">
    <live-title titname="即将直播"></live-title>
    <live-video v-if="ishave" :livelist="livelist"></live-video>
    <livecontent :livecontent="livecontent"></livecontent>
    <div class="button">查看更多</div>
    <live-title titname="往期直播"></live-title>
    <livecontent :livecontent="liveitemsList"></livecontent>
  </div>
</template>

<script>
import PubSub from "pubsub-js";
import request from "../utils/request";
import LiveTitle from "../components/LiveTitle.vue";
import LiveVideo from "../components/Live_video.vue";
import livecontent from "../components/Live_content.vue";
export default {
  name: "LiveView",

  data() {
    return {
      ishave: false,
      livelist: {},
      livecontent: [],
      liveitemsList: [],
    };
  },
  components: {
    LiveTitle,
    LiveVideo,
    livecontent,
  },
  created() {
    request(
      `https://m.lanqb.com/api/daniu?link=paging&live=3&heat=N&page=${this.page}&is_live=1`
    ).then((data) => {
      // console.log(data.live);
      this.livelist = data.live[0];
      // console.log(this.livelist);
      this.livecontent = data.live.splice(1);
      console.log(data.live.splice(1));
      console.log(this.livecontent);
      this.ishave = true;
    });

    PubSub.subscribe("loding", (msg, data) => {
      // this.liveitemsList=data;
      this.liveitemsList=[...this.liveitemsList,...data]
    });
  },
  mounted() {},

  methods: {

  },
};
</script>

<style lang="scss" scoped>
.live {
  // height: 87vh;
  background-color: #f4f4f4;
  .button {
    margin: 0 auto;
    width: 345px;
    height: 35px;
    font-size: 16px;
    text-align: center;
    line-height: 32px;
    border-radius: 25px;
    color: #634b19;
    background: #edce8c;
    background-image: linear-gradient(180deg, #f7e9c0, #edce8c);
  }
}
</style>
